<template>
  <div>
    <a-modal 
      :title="title" 
      :visible="isVisible"
      :ok-text="okText"
      cancel-text="取消"
      :ok-button-props="{
        props: {
          loading: isLoading
        }
      }"
      :width="modalWidth"
      :body-style="modalBodyStyle"
      @ok="handleOk"
      @cancel="handleCancel">
      
       <a-form :form="form" @submit="handleSubmit">
        <a-form-item v-bind="formItemLayout" label="节点名称">
          <a-input
            v-decorator="[
              'name',
              {
                rules: [
                  { required: true, message: '必填' },
                  { validator: validNodeName }
                ],
                validateFirst: false
              }
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="es6">
module.exports = asyncRequire([
    'mixins',
    'alias!@PAGE/components/localNodes',
], function(MXS, NodeAPI, resolve, reject) {
  resolve({
    name: 'FlowChartNodeAE',
    mixins: [MXS.CommonMixin, MXS.ModalMixin, MXS.ValidatorMixin, MXS.AntdMixin],
    data () {
      return {
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 18 },
          }
        },
        modalWidth: '600px',
        modalBodyStyle: {
          width: '580px',
          border: 'none'
        },
        nodeNames: NodeAPI.findAll().nodes.map(node => node.name)
      }
    },
    created () {
        if(this.isEdit) {
            this.form = this.$form.createForm(this, {
                name: 'edit_form',
                mapPropsToFields: () => {
                    return this.mapPropsToFields({
                        formRef: this.$form,
                        dataRef: this.data,
                    });
                }
            });
        } else {
            this.form = this.$form.createForm(this, { name: 'add_form' });
        }
    },
    computed: {
        title () {
            return this.isEdit ? '编辑节点' : '添加节点';
        },
        okText () {
            return this.isEdit ? '修改' : '新增';
        }
    },
    methods: {
      validNodeName (rule, value, callback) {
        if(this.isEdit && value === this.data.name) {
          callback();
        } else if(this.nodeNames.findIndex(nodeName => nodeName === value) >= 0) {
          callback('名称已存在');
        } else {
          callback();
        }
      },
      handleSubmit (e) {
        e.preventDefault()
      },
      handleCancel () {
        this.close();
      },
      handleOk () {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.showLoading();
            Promise.resolve(this.showLoading())
                .then(() => {
                  if(this.isEdit) {
                    values.id = this.data.id;
                    NodeAPI.modifyNode(values);
                  } else {
                    NodeAPI.addNode(values);
                  }
                })
                .then(data => {
                    this.$message.success(this.isEdit ? '编辑成功' : '添加成功');
                    this.close({ $hook: true });
                })
                .finally(this.hideLoading);
          }
        });
      }
    }
  });
});
</script>

<style scoped>
  
</style>
